<!-- treeMenu.vue -->
<template>
    <template v-for="(item, index) in props.menuData">
        <!-- 当他没有子菜单的时候： childern属性没有，或则该属性长度为0    当前项的唯一值就是父组件来的id以及对应内容的id值-->
        <el-menu-item v-if="!item.children || item.children.length == 0" :index="`${props.index}-${item.meta.id}`"
            :key="`${props.index}-${item.meta.id}`" @click="handleClick(item, `${props.index}-${item.meta.id}`)">
            <el-icon size="20">
                <component :is="item.meta.icon"></component><!--使用动态组件来渲染对应的图标-->
            </el-icon>
            <span>{{ item.meta.name }}</span>
        </el-menu-item>
        <!-- 有子菜单的时候 -->
        <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
            <template #title> 
                <el-icon size="20">
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.name }}</span>
            </template>
            <!-- 这里是递归的渲染逻辑 -->
            <tree-menu :menuData="item.children" :index="`${props.index}-${item.meta.id}`"></tree-menu>
        </el-sub-menu>
    </template>

    <!-- 
    <el-menu-item index="4">
        <el-icon>
            <setting />
        </el-icon>
        <span>Navigator Four</span>
    </el-menu-item> -->
</template>
<script setup>
import {useRouter} from 'vue-router'
import { useStore } from 'vuex';
const props = defineProps(['menuData', 'index'])
console.log(props.menuData);//获取父组件传递过来的信息
//单击菜单
const router = useRouter();//创建router实例，进行跳转
const store = useStore();
const handleClick = (item, index) => {
    console.log(item, 'item');
    store.commit('addMenu', item.meta)//commit提交一个mutation，将当前菜单信息保存到vuex中，第一个参数是mutation的名称，第二个参数是传递的参数
    router.push(item.meta.path)
}
</script>

<style scoped></style>